<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-title">当前余额</view>
			<view class="balance-number">
				<text>￥</text>
				<text class="number">{{ vk.vuex.getters('$user/getUserBalanceStr') }}</text>
			</view>
			<view class="records-btn" @click="pageToRec">
				<text>收支记录</text>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
		</view>
		<!-- 余额充值选项 + 自定义充值金额 -->
		<view class="balance-list">
			<view class="balance-list-title">选择充值金额</view>
			<view class="balance-list-main">
				<!-- <view class="balance-list-item" v-for="(item,index) in 5" :key="index" :class="active === index ?'active':''" @click="active = index">
					<view>充值 {{ (index+1) * 1000}} 元</view>
				</view> -->
				<view class="balance-list-item" :class="active === 'custom' ?'active':''" @click="active = 'custom'">
					<view>充值任意金额</view>
				</view>
			</view>
			<view v-if="active === 'custom'" class="balance-input-box">
				<view class="balance-input-title">请输入需要充值的金额</view>
				<view class="balance-input">
					<vk-data-input v-model="form1.balance" placeholder="输入金额" type="money" />
				</view>
			</view>
		</view>

		<view class="submit-btn safe-area-inset-bottom" @click="showPayType">
			<view class="btn">充值</view>
		</view>


		<!-- 弹窗 - 支付方式选择 -->
		<pay-action-sheet v-model="payType.show" :totalFee="form1.balance" @click="pay"></pay-action-sheet>
		<!-- 余额充值支付插件 -->
		<pay-balance-recharge ref="vkPay"></pay-balance-recharge>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	import payActionSheet from "./components/pay-action-sheet"
	import payBalanceRecharge from "./components/pay-balance-recharge"
	export default {
		components:{
			payActionSheet,
			payBalanceRecharge
		},
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{
					balanceStr:"请稍等..."
				},
				// 表单请求数据
				form1:{
					balance:""
				},
				scrollTop:0,
				loading:false,
				active:"custom",
				payType:{
					show:false
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init();
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			let { options={} } = this;
			// 在onReady内执行是为了先让组件加载完成
			// 如果是同步回调过来的，执行下查询
			if (options.return && options.out_trade_no) {
				this.form1.out_trade_no = options.out_trade_no;
				this.$refs.vkPay.checkPayment(options.out_trade_no);
			}
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(){
				let that = this;
				let options = that.options;
				that.getMyInfo();
			},
			pageToRec(){
				vk.navigateTo('./list');
			},
			getMyInfo(){
				// 更新vuex内的用户信息
				vk.callFunction({
					url: 'client/user.getMyInfo'
				});
			},
			showPayType(){
				if (this.form1.balance <= 0) {
					vk.toast("充值金额必须>0");
					return false;
				}
				this.payType.show = true;
			},
			pay(payType){
				let that = this;
				// 防抖函数
				vk.pubfn.debounce(() => {
					that.payType.show = false;
					that.$refs.vkPay.createPayment({
						provider: payType,
						total_fee: that.form1.balance,
						success:(data) => {
							vk.toast(data.msg,"ok",()=>{
								that.pageToRec();
							});
						}
					});
				}, 600);
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{

		}
	}
</script>
<style lang="scss" scoped>
	.app{
		padding-top: 30rpx;
	}
	.balance-card{
		background-color: var(--main);
		border-radius: 10rpx 100rpx 10rpx 10rpx;
		color: #ffffff;
		padding: 40rpx;
		margin: 0 30rpx 30rpx 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 2rpx 4rpx 6rpx 0rpx var(--main);
		.balance-title{
			font-size: 26rpx;
		}
		.balance-number{
			margin-top: 20rpx;
			font-weight: bold;
			.number{
				font-size: 60rpx;
			}
		}
		.records-btn{
			text-align: right;
			font-size: 24rpx;
			text{
				margin-right: 10rpx;
			}
		}
	}

	.balance-list{
		padding: 30rpx;
		.balance-list-title{
			font-weight: bold;
			font-size: 34rpx;
		}
		.balance-list-main{
			margin-top: 40rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx;
			.balance-list-item{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				background-color: #ffffff;
				border-radius: 20rpx;
				border: 2rpx solid #e3e3e3;
				font-size: 26rpx;
				height: 120rpx;
			}
			.balance-list-item.active{
				background-color: #fdf0e7;
				color: var(--main);
				border: 2rpx solid var(--main);
			}
		}
		.balance-input-box{
			.balance-input-title{
				margin: 30rpx 0;
				font-weight: bold;
				font-size: 34rpx;
			}
			.balance-input{
				border-radius: 20rpx;
				overflow: hidden;
				padding: 20rpx;
				background-color: #ffffff;
			}
		}
	}

	.submit-btn{
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		.btn{
			width: 80%;
			margin: 40rpx auto;
			text-align: center;
			background-color: var(--main);
			color: #ffffff;
			border-radius: 40rpx;
			padding: 20rpx 0;
		}
		.btn:active{
			filter: grayscale(50%);
		}
	}


</style>
